<template>
    <div>
        username:{{name}},realName:{{userName}}
        <router-link to="/">退回</router-link>
        <div class="mainDiv">
            <div class="left">
                <ui>
                    <li @click="pushPage('/info')">info</li>
                    <li @click="pushPage('/detail')">detail</li>
                </ui>
            </div>
            <div class="right">
                <router-view :key="path"></router-view>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data(){
        return{
            name:'',
            userName:'',
            path:'/info'
        }
    },
    mounted(){
        this.name = this.$route.query.name;
        this.userName = this.$store.state.name; 
        this.$router.push('/info')
    },
    methods:{
        pushPage(page){
            this.$router.push(page)
        }
    }
}
</script>
<style scoped>
    .mainDiv{
        height: 600px;
        width: 100%;
        display: flex;
        flex-direction:row;
    }
    .left{
        height: 600px;
        width: 200px;
        border: 1px solid red;
        flex-grow: 0;
    }
    .right{
        height: 600px;
        width: 100px;
        border: 1px solid green;
        flex-grow: 2;
    }
</style>